<template>
  <view>

    <view v-if="item.status == 1" class="state">已付款</view>
    <view v-if="item.status == 0" class="state">待付款</view>

    <view class="info">
      <view>
        <view class="name">{{ info.title }}</view>
        <view class="desc">状态：
          <text v-if="info.status == 1">未开始</text>
          <text v-if="info.status == 2">活动进行中</text>
          <text v-if="info.status == 3">活动已结束</text>
        </view>

        <view class="desc">{{ info.joinCount }}人已参加</view>
<!--        /{{ info.like_number }}获赞-->
        <view class="desc">¥{{ info.price }}</view>
      </view>
    </view>

    <view class="attribute acea-row row-between-wrapper">
      <view class="acea-row row-between-wrapper"
      >活动时间
        <text class="atterTxt">{{ info.start_time | formatDate }}</text>
      </view>
      <view class="iconfont icon-jiantou"></view>
    </view>
    <view class="attribute acea-row row-between-wrapper">
      <view class="acea-row row-between-wrapper"
      >活动地址
        <text class="atterTxt">{{ info.address }}</text>
      </view>
      <view class="iconfont icon-jiantou"></view>
    </view>
    <view class="attribute acea-row row-between-wrapper">
      <view class="acea-row row-between-wrapper"
      >活动人数
        <text class="atterTxt">最多{{ info.person_num }}人</text>
      </view>
      <view class="iconfont icon-jiantou"></view>
    </view>

    <view class="notice-title">活动详情</view>
    <view v-if="description" class="content">
      <jyf-parser
          ref="article"
          :domain="domain"
          :html="description.replace(/<br\/>/gi, '')"
          :tag-style="tagStyle"
      ></jyf-parser>
    </view>


    <view class='wrapper'>
      <view class='item acea-row row-between'>
        <view>订单号</view>
        <view class='conter'>{{ item.order_sn }}</view>
      </view>
      <view class='item acea-row row-between'>
        <view>下单时间</view>
        <view class='conter'>{{ item.add_time | formatDate }}</view>
      </view>
      <view v-if="item.pay_time" class='item acea-row row-between'>
        <view>支付时间</view>
        <view class='conter'>{{ item.pay_time | formatDate }}</view>
      </view>
      <view class='item acea-row row-between'>
        <view>订单金额</view>
        <view class='conter'>¥{{ item.pay_money }}</view>
      </view>
      <view class='item acea-row row-between' v-if="item.refund_time ">
        <view>申请退款时间</view>
        <view class='conter'>{{ item.refund_time | formatDate }}</view>
      </view>
    </view>

    <view v-if="item.status == 0" class="footer">
      <text class="font-color-red">￥{{ item.pay_money }}</text>
      <view class="btn" @click="goPay">立即支付</view>
    </view>
    <view v-if="item.status == 1 && item.refund_order == 0" class="footer">
     <view class="flex-1"></view>
      <picker mode="selector" :range="refund_msg" @change="refundOrder">
        <view class="btn" >退款</view>
      </picker>
    </view>
  </view>
</template>

<script>
import productConSwiper from "@/components/productConSwiper/index.vue";
import {HTTP_REQUEST_URL} from "@/config/app";
import {activityRefundOrder, getActivityInfo, payActivity} from "@/api/2_activity";
import {str2arr} from "@/utils";

export default {
  components: {productConSwiper},
  data() {
    return {
      item: {},
      info: {},
      imgUrls: [],
      domain: HTTP_REQUEST_URL,
      description: '',
      tagStyle: {
        img: "width:100%;display:block;",
      },
      refund_msg: []
    };
  },
  onLoad(options) {
    this.item = JSON.parse(options.item)
    this.refund_msg = JSON.parse(options.refund_msg)
    this.init()
  },
  methods: {
    init() {
      getActivityInfo(this.item.ac_id).then(res => {
        let {data} = res
        this.info = data
        this.imgUrls = str2arr(data.banner)
        this.description = data.content
      })
    },
    goPay() {
      payActivity({
        id: this.item.id,
      }).then(res2 => {
        console.log(res2)
        let config = res2.data.result.config
        uni.requestPayment({
          timeStamp: config.timestamp,
          nonceStr: config.nonceStr,
          package: config.package,
          signType: config.signType,
          paySign: config.paySign,
          success: (res) => {
            this.$util.Tips({
              title: '支付成功',
              icon: 'success'
            });
            this.init()

          },
          fail: () => {
            return this.$util.Tips({
              title: '支付失败'
            });
          },
          complete: (res) => {
            if (res.errMsg == 'requestPayment:cancel') return this.$util.Tips({
              title: '取消支付'
            });
          }
        })
      })
    },
    refundOrder(e) {
      activityRefundOrder(this.item.id, {
        refund_msg: this.refund_msg[e.detail.value]
      }).then(res=>{
        this.$util.Tips({
          title: '提交成功',
          icon: 'success'
        });
        this.init()
      }).catch(err=>{
        this.$util.Tips({
          title: err,
          icon: 'fail'
        });
      })
    }
  }
};
</script>

<style lang="scss">
@import "../../index/style/main.scss";

.wrapper {
  background-color: #fff;
  margin-top: 12rpx;
  padding: 30rpx;
}

.wrapper .item {
  font-size: 28rpx;
  color: #282828;
}

.wrapper .item ~ .item {
  margin-top: 20rpx;
}

.wrapper .item .conter {
  color: #868686;
  width: 460rpx;
  text-align: right;
}

.wrapper .item .conter .copy {
  font-size: 20rpx;
  color: #333;
  border-radius: 17rpx;
  border: 1rpx solid #666;
  padding: 3rpx 15rpx;
  margin-left: 24rpx;

}

.wrapper .actualPay {
  border-top: 1rpx solid #eee;
  margin-top: 30rpx;
  padding-top: 30rpx;
}

.wrapper .actualPay .money {
  font-weight: bold;
  font-size: 30rpx;
}

.footer {
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  padding: 0 30rpx;
  font-size: 28rpx;
  color: #333;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .price {
    font-size: 28rpx;
    color: #fff;
  }

  .btn {
    font-size: 30rpx;
    color: #fff;
    width: 240rpx;
    height: 70rpx;
    background-color: #e93323;
    border-radius: 50rpx;
    text-align: center;
    line-height: 70rpx;
  }
}

.state {
  height: 100rpx;
  text-align: center;
  color: #fa6514;
  line-height: 100rpx;
  margin-bottom: 30rpx;
}

.bnt {
  margin: 30rpx;
}

.btns {
  text-align: center;
  line-height: 76rpx;
  color: #fff;
  font-size: 28rpx;
}

.joinCart {
  flex: 1;
  border-radius: 50rpx 0 0 50rpx;
  background-image: linear-gradient(to right, #fea10f 0%, #fa8013 100%);
}

.buy {
  flex: 1;

  border-radius: 0 50rpx 50rpx 0;
  background-image: linear-gradient(to right, #fa6514 0%, #e93323 100%);
}

.users {
  padding-left: 30rpx;
  flex-wrap: wrap;
  /* #ifdef MP */
  margin-top: 0;
  /* #endif */
  /* #ifdef H5 */
  margin-top: 0;

  /* #endif */
  .avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30%;
    margin-right: 3%;
    margin-top: 20rpx;

    height: 80rpx;
    width: 80rpx;
    border-radius: 40rpx;
    background: #eee;

    &.active {
      background: #999;
      color: #fff;
    }
  }
}

.attribute {
  background-color: #fff;
  padding: 0 30rpx;
  font-size: 26rpx;
  color: #82848f;
  height: 80rpx;
  position: relative;
}

.atterTxt {
  font-size: 28rpx;
  color: #282828;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  // width: 400rpx;
  margin-left: 20rpx;
}

page {
  background: #fff;
}

.info {
  position: relative;

  .name {
    margin: 20rpx 30rpx 0;
    font-size: 32rpx;
    font-weight: 700;
  }

  .score {
    height: 50rpx;
  }

  .desc {
    margin: 0 30rpx;
    font-size: 24rpx;
    color: #82848f;
    margin-top: 10rpx;
  }

  .shoucang {
    font-size: 18rpx;
    text-align: center;
    color: #666;
    position: absolute;
    top: 10rpx;
    right: 30rpx;
  }
}

.notice-title {
  font-size: 28rpx;
  color: #333;
  margin: 30rpx;
  font-weight: bold;
}

.content {
  margin: 20rpx 30rpx 0;
}
</style>